<!-- today -->
<template>
    <div>
      <div>
        <div class="activecolor" style="width:100px;height:30px;position:relative;">
          <div :style="{'width': '100%',backgroundColor:comBackgroundColor(this.$data.data[this.$data.data.column.field])}" style="color:#fff;" class="data"></div>
          <div class="data" style="z-index:2;paddingLeft:10px;" :style="{color:this.templateConfig.fontColor}">{{date}}</div>
      </div>
    </div>
    </div>
</template>

<script>
import moment from 'moment'
import store from '@/store'
export default {
  data () {
    return {
      templateConfig: {
        IsTime: false,
        timeFormatstr: 'HH:mm:ss',
        IsContrast: false,
        fontColor: 'black',
        maxColor: '#E3FCEF',
        minColor: '#FFEBE5',
        defaultColor: '',
        formatStr: 'YYYY/MM/DD',
        shortTimeZone: false,
        modifier: ' ',
        calculationSymbol: 1, // 1===//2 after
        IsStandard: true
      }

    }
  },
  mounted () {
    if (!this.$data.data.column.templateConfig) {
      this.$data.data.column = { ...this.$data.data.column, ...this.templateConfig }
    }
    this._.merge(this.templateConfig, this.$data.data.column.templateConfig)
  },
  computed: {
    date () {
      if (this.templateConfig.IsTime) {
        return this.generallyTimeFormat(this.$data.data[this.$data.data.column.field])
      } else {
        return this.generallyFormat(this.$data.data[this.$data.data.column.field])
      }
    }
  },
  methods: {
    comBackgroundColor (date) {
      let localDate = moment().format()
      if (date) {
        if (this.templateConfig.calculationSymbol === 1) {
          return this.symbolone(localDate, date)
        } else if (this.templateConfig.calculationSymbol === 2) {
          return this.symboltwo(localDate, date)
        } else {
          return this.templateConfig.minColor
        }
      }
    },
    generallyFormat (val) {
      if (val) {
        if (this.templateConfig.IsStandard) {
          if (this.templateConfig.shortTimeZone) {
          } else {
            return moment(val).format(this.templateConfig.formatStr)
          }
        } else {
          if (this.templateConfig.shortTimeZone) {
            return moment.tz(val, store.state.user.timezoneId).format(this.templateConfig.formatStr) + this.templateConfig.modifier + moment.tz(val, store.state.user.timezoneId).format('zz')
          } else {
            return moment.tz(val, store.state.user.timezoneId).format(this.templateConfig.formatStr)
          }
        }
      }
    },
    generallyTimeFormat (val) {
      if (val) {
        if (this.templateConfig.shortTimeZone) {
          return moment.tz(val, store.state.user.timezoneId).format(this.templateConfig.timeFormatstr) + this.templateConfig.modifier + moment.tz(val, store.state.user.timezoneId).format('zz')
        } else {
          return moment.tz(val, store.state.user.timezoneId).format(this.templateConfig.timeFormatstr)
        }
      }
    },
    symbolone (localDate, val) {
      if (this.templateConfig.IsStandard) {
        if (moment.tz(localDate, store.state.user.timezoneId).format(this.templateConfig.formatStr) === moment.tz(val, store.state.user.timezoneId).format(this.templateConfig.formatStr)) {
          return this.templateConfig.maxColor
        } else {
          return this.templateConfig.minColor
        }
      } else {
        if (moment.tz(localDate, 'America/Chicago').format(this.templateConfig.formatStr) === moment(val).format(this.templateConfig.formatStr)) {
          return this.templateConfig.maxColor
        } else {
          return this.templateConfig.minColor
        }
      }
    },
    symboltwo (localDate, val) {
      if (moment.tz(val, store.state.user.timezoneId).format(this.templateConfig.formatStr).after(localDate)) {
        return this.templateConfig.maxColor
      } else {
        return this.templateConfig.minColor
      }
    }
  }
}
</script>

<style>
.data {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
</style>
